<template>
    <div class="wrap normal">
        <!-- 搜索条件 -->
        <div class="wrap-form" id="wrap-form">
             <div class="left-panel">
                <el-form :inline="true" :model="form" label-width="100px" @submit.native.prevent>
                    <el-form-item label="快递卡号">
                        <el-input v-model="form.expressCardCode" placeholder="请输入" clearable style="width: 220px"></el-input>
                    </el-form-item>
                    <el-form-item label="代理商手机号">
                        <el-input v-model="form.relevanceAgentUserMobile" placeholder="请输入" clearable style="width: 220px"></el-input>
                    </el-form-item>
                    <el-form-item label="核销状态">
                        <el-select v-model="form.isVerification" placeholder="请选择" clearable style="width: 220px">
                            <el-option v-for="(item, index) in hxStatusOptions" :key="index" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="pageOperate('search')">查询</el-button>
                        <el-button icon="el-icon-refresh" @click="pageOperate('refresh')">刷新</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!-- table数据 -->
        <div class="wrap-table">
            <el-table :data="tableData" :max-height="tableMaxHeight" border v-loading="tableLoading" :header-cell-style="{ background: '#F5F6FA' }">
                <el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
                <el-table-column prop="expressCardTypeName" label="快递卡类型" min-width="200"> </el-table-column>
                <el-table-column prop="expressCardCode" label="快递卡卡号" min-width="120"></el-table-column>
                <el-table-column prop="isVerificationName" label="是否核销" min-width="100"></el-table-column>
                <el-table-column prop="relevanceAgentUserName" label="关联代理姓名" min-width="100"></el-table-column>
                <el-table-column prop="relevanceAgentUserMobile" label="关联代理商手机号" min-width="100"></el-table-column>
            </el-table>
            <pagination :total="page.totalNum" :page.sync="page.pageNum" :limit.sync="page.pageSize" layout="total, sizes, prev, pager, next, jumper" @pagination="getTableData" />
        </div>
    </div>
</template>

<script>
import tableHeight from '@/mixins/tableHeight'
import { getAgentCardList } from '@/api/expressCard'
import { hxStatusOptions } from '@/filters/options'
export default {
    name: 'AgentCard',
    mixins: [tableHeight],
    data() {
        return {
            form: {
                expressCardCode: '',
                isVerification: '',
                relevanceAgentUserMobile: ''
            },
            page: {
                pageNum: 1,
                pageSize: 10,
                totalNum: 0
            },
            tableData: [],
            tableLoading: false,
            // 类型
            operateType: '',
            // 标题
            operateTitle: '',
            // 弹框
            operateDialog: false,
            // 宽度
            operateWidth: 550,
            // loading
            operateLoading: false,
            // 操作form
            operateForm: {

            },
            operateRules: {

            },
            // 核销状态
            hxStatusOptions
        };
    },
    methods: {
        // 数据
        getTableData() {
            this.tableLoading = true
            const data = {
                pageNum: this.page.pageNum,
                pageSize: this.page.pageSize,
                ...this.form
            }
            getAgentCardList(data).then(res => {
                this.tableLoading = false
                this.tableData = res.data.records
                this.page.totalNum = res.data.total
            }).catch(error => {
                this.tableLoading = false
            })
        },
        // 操作
        pageOperate(type, row) {
            this.operateType = type
            switch (type) {
                case 'search':
                    this.getTableData()
                    break;
                case 'refresh':
                    Object.assign(this.$data, this.$options.data())
                    this.getTableData()
                    break;
                default:
                    break;
            }
        }
    },
    mounted() {
        this.getTableData()
    }
};
</script>

<style lang="scss" scoped>
</style>